<script setup>


import {Timer} from '@element-plus/icons-vue';
import {onMounted, ref} from "vue";
import axios from "axios";

const bus_id = ref(2)

function handleEdit(index, row) {

}

function handleDelete(index, row) {

}


const tableData = ref([])
onMounted(() => {
  axios.get("/business/getShopOrders", {
    params: {
      bus_id: bus_id.value

    }
  }).then(res => {
    console.log(res.data)
    tableData.value = res.data.data.customerOrderList;

  })
})
const formatOrderStatus = (orderType) => {
  const orderStatusMap = {
    1: '未支付',
    2: '已支付',
    3: '已退款',
    4: '已经确认',
    5: '取消'
  };

  return orderStatusMap[orderType] || '未知状态';
};
</script>

<template>
  <div class="wrapper">

    <div class="shopOrdersList">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <div m="4">
              <p m="t-0 b-2">门店本月累计营业额度：999w</p>
              <p m="t-0 b-2">好评：1w+</p>
              <p m="t-0 b-2">差评：0</p>
              <p m="t-0 b-2">综合评分：4.9</p>
              <h3>商品详细信息</h3>
              <el-table :data="props.row.customerOrders" style="border: #38CA73">
                <el-table-column label="订单时间" prop="createTime"/>
                <el-table-column label="订单更新时间" prop="updateTime"/>
                <el-table-column label="订单总计" prop="orderTotal"/>
                <el-table-column label="订单状态" prop="orderType">
                  <template #default="{ row }">
                    {{ formatOrderStatus(row.orderType) }}
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                    >编辑
                    </el-button
                    >
                    <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                    >删除
                    </el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="门店名字" prop="shopName"/>
        <el-table-column label="创建时间" prop="createTime"/>

      </el-table>
    </div>
  </div>
</template>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
}
</style>
